<template>
  <div class="login_wrap">
    <div class="login">
      <div class="wrap">
        <p class="title">健康医典</p>
        <a-form ref="loginRef" :model="loginform" :rules="loginRules">
          <a-form-item label="账号：" name="username">
            <a-input v-model:value="loginform.username"></a-input>
          </a-form-item>
          <a-form-item label="密码：" name="password">
            <a-input
              type="password"
              v-model:value="loginform.password"
            ></a-input>
          </a-form-item>
          <a-form-item class="btns">
            <a-button type="primary" block @click="login()">登录</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
  </div>
</template>

<script>
import { h, ref, toRefs, reactive, onMounted, computed, watch } from "vue";
import { onBeforeRouteUpdate, useRoute, useRouter } from "vue-router";
import Service from "@/api/service";
import { message, Modal } from "ant-design-vue";

export default {
  setup() {
    const router = useRouter();
    const loginform = reactive({
      username: "admin",
      password: "admin",
    });
    const loginRef = ref();
    const loginRules = {
      username: [
        {
          required: true,
          message: "此处不可为空哦!!",
        },
      ],
      password: [
        {
          required: true,
          message: "此处不可为空哦!!",
        },
      ],
    };
    // 登录
    const login = () => {      
      router.push({
        path: "/user",
      });
      // loginRef.value
      //   .validate()
      //   .then(async () => {
      //     const res = await Service.adminLogin(loginform);
      //     console.log(res);
      //     if (res.status == "1") {
      //       message.success("登录成功");
      //       window.sessionStorage.setItem("token", res.body);
      //       router.push({
      //         path: "/user",
      //       });
      //     }
      //   })
      //   .catch((error) => {
      //     console.log("error", error);
      //   });
    };
    return {
      loginform,
      loginRef,
      login,
      loginRules,
    };
  },
};
</script>

<style lang='less' scoped>
.login_wrap {
  background: radial-gradient(ellipse, #5f8fbf, #2b4b6b);
  height: 100vh;
}
.login {
  width: 380px;
  // height: 260px;
  background-color: #fff;
  border-radius: 12px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  .title {
    color: #000;
    font-size: 25px;
    text-align: center;
    margin-top: 10px;
  }
}
.wrap {
  margin: 0 auto;
  width: 80%;
}
.btns {
  text-align: center;
}
</style>
